<template>
  <div id="arraign" v-loading="loading">
    <div v-if="records.length" class="records-container">
      <div :class="'record-item' + (doing ? '' : record.state === 2 ? ' end' : ' active')" :key="record.id" v-for="record in records">
        <div class="prisoner-image">
          <img width="100%" :src="getPrisonerImg(prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).id)" :onerror="getDefaultImg(6)"/>
        </div>
        <div class="info-text">
          <div class="info-line">
            <div class="info-label">对象姓名：</div>
            <div class="info-value">{{prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).name}}</div>
          </div>
          <div class="info-line">
            <div class="info-label">对象番号：</div>
            <div class="info-value">{{prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).staffPrisoninNo}}</div>
          </div>
          <div class="info-line">
            <div class="info-label">所在监室：</div>
            <div class="info-value">{{prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).prisonRoomNo}}</div>
          </div>
          <div class="info-line">
            <div class="info-label">入所时间：</div>
            <div class="info-value">{{prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).detentioninDate}}</div>
          </div>
          <div class="info-line">
            <div class="info-label">入所性质：</div>
            <div class="info-value">{{prisoners.find(p => p.staffPrisoninNo === record.prisonInNo).detentioninNatures}}</div>
          </div>
        </div>
        <div class="shadow" v-if="!doing">
          <div class="btn btn-start" v-if="record.state === 0" @click="beginArraign(record)">开始提审</div>
        </div>
        <div class="shadow doing" v-if="doing && record.state === 1">
          <div class="btn btn-end" @click="endArraign(record)" v-if="record.state === 1">结束提审</div>
        </div>
        <div class="shadow end" v-if="record.state === 2">
          <img width="80%" src="../assets/Arraign/img/end.png">
        </div>
      </div>
    </div>
    <div class="no-records" v-else>
      当前房间没有正在提审的对象
    </div>
  </div>
</template>
<script>
import GetImage from '../mixins/GetImage'
export default {
  name: 'arraign',
  mixins: [GetImage],
  data () {
    return {
      records: [], // 提审记录
      prisoners: [], // 对象信息
      doing: false, // 是否正在提审
      irmId: null, // 主记录id
      audioSrc: '',
      loading: true
    }
  },
  methods: {
    /**
     * 获取提审记录
     */
    getRecords () {
      this.loading = true
      this.$http.POST('Interviewer:listInterviewerRecord', {}).then(res => {
        if (res.data.code === 200) {
          const mainRecords = res.data.data
          if (!mainRecords || mainRecords.length === 0) {
            this.$set(this, 'records', [])
          } else if (mainRecords.length === 1) {
            this.irmId = mainRecords[0].id
            const records = mainRecords[0].records
            this.doing = records.some(r => r.state === 1)
            this.$http.REQUEST({
              path: 'Interviewer:GetPrisonersByIds',
              method: 'POST',
              params: { ids: records.map(r => r.prisonInNo).join(',') }
            }).then(res1 => {
              this.$set(this, 'records', records)
              this.prisoners = res1.data.data
            })
          } else {
            this.$alert('记录数目异常')
          }
        } else {
          this.$alert(res.data.msg, '提示', {
            confirmButtonText: '确定',
            callback: () => {
              this.$router.push('/login')
            }
          })
        }
        this.loading = false
      })
    },

    /**
     * 开始提审
     */
    beginArraign (record) {
      this.$confirm('确认开始提审？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.loading = true
        this.$http.POST('Interviewer:beginInterviewer', {
          id: record.id,
          irmId: this.irmId
        }).then(res => {
          if (res.data.code === 200) {
            this.getRecords()
            this.$ws.SendMessage({
              code: this.MESSAGE_CODE.RELAY,
              msgType: this.MESSAGE_TYPE.INTERVIEWER_UPDATE
            })
          } else {
            this.loading = true
            this.$message.error(res.data.msg)
          }
        })
      })
    },

    /**
     * 结束提审
     */
    endArraign (record) {
      this.$confirm('确认结束提审？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.loading = true
        this.$http.POST('Interviewer:endInterviewer', {
          id: record.id,
          irmId: this.irmId
        }).then(res => {
          if (res.data.code === 200) {
            this.getRecords()
            this.$ws.SendMessage({
              code: this.MESSAGE_CODE.RELAY,
              msgType: this.MESSAGE_TYPE.INTERVIEWER_UPDATE
            })
          } else {
            this.loading = true
            this.$message.error(res.data.msg)
          }
        })
      })
    }
  },
  created () {
    this.getRecords()
    this.$ws.CreateEvent('arraign', e => {
      const msg = JSON.parse(e.data)
      if (msg.code === this.MESSAGE_CODE.RELAY) {
        return
      }
      if (msg.msgType === 'new-record') {
        this.getRecords()
      }
    })
  }
}
</script>
<style scoped>
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #arraign {
    width: 100%;
    height: 100%;
    background-image: url("../assets/Arraign/img/bg.png");
    background-size: 100% 100%;
  }
  .records-container{
    position: absolute;
    width: calc(100% - 200px);
    height: 600px;
    left: 100px;
    top: calc(50% - 300px);
    display: flex;
    justify-content: space-between;
  }
  .record-item{
    width: 22%;
    height: 100%;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #ffffffbb;
    transition: all .2s;
    position: relative;
    overflow: hidden;
  }
  .record-item .shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000000aa;
    opacity: 0;
    transition: opacity .2s;
    overflow: hidden;
  }
  .record-item .shadow.doing,.record-item .shadow.end{
    opacity: 1;
  }
  .record-item .shadow.end{
    text-align: center;
    padding-top: 50px;
  }
  .record-item .shadow.end > img{
    transform: rotate(-20deg);
  }
  .record-item.active:hover{
    margin-top: -5px;
  }
  .record-item.active:hover .shadow{
    opacity: 1;
  }
  .btn{
    position: absolute;
    width: 260px;
    line-height: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 130px);
    text-align: center;
    font-size: 40px;
    color: #eee;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .2s;
  }
  .btn.btn-start{
    background-color: #409EFF;
  }
  .btn.btn-start:hover{
    background-color: #66b1ff;
  }
  .btn.btn-end{
    background-color: #F56C6C;
  }
  .btn.btn-end:hover{
    background-color: #f78989;
  }
  .no-records{
    width: 560px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    background-color: #ffffff22;
    color: #eee;
    border: 1px solid #eee;
    border-radius: 5px;
    position: absolute;
    left: calc(50% - 280px);
    top: calc(50% - 40px);
  }
  .prisoner-image{
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  #arraign .info-line{
    display: flex;
    font-size: 18px;
    color: #333;
    margin-top: 10px;
    border-bottom: 1px solid #666;
  }
  #arraign .prisoner-line .info-line{
    font-size: 14px;
    margin-top: 4px;
  }
  #arraign .info-line > .info-label{
    width: 100px;
    text-indent: 10px;
  }
  #arraign .prisoner-line .info-label{
    width: 80px;
  }
</style>
